<template>
  <n-modal v-model:show="showModal" preset="dialog" :show-icon="false">
    <n-card v-if="editType==='edit' || editType==='add'">
      <h1 class="w-full text-center titletext my-2">{{title}}</h1>
      <flexform ref="flexFormref" :formList="formList" :formValue="formValue"></flexform>
      <template #action>
        <div class="w-full flex justify-end items-center">
          <n-button @click="handleClose">取消</n-button>
          <n-button type="primary" @click="handleSave">确定</n-button>
        </div>
      </template>
    </n-card>
    <n-card v-if="editType==='view'">
      <h1 class="w-full text-center titletext my-2">{{title}}</h1>
      查看
      <template #action>
        <div class="w-full flex justify-end items-center">
          <n-button @click="handleClose">关闭</n-button>
        </div>
      </template>
    </n-card>
    <n-card v-if="editType==='success'">
      <n-result status="success" title="成功" :description="resultText">
      </n-result>
      <template #action>
        <div class="w-full flex justify-end items-center">
          <n-button @click="handleClose">关闭</n-button>
        </div>
      </template>
    </n-card>
    <n-card v-if="editType==='error'">
      <n-result status="success" title="错误" :description="resultText">
      </n-result>
      <template #action>
        <div class="w-full flex justify-end items-center">
          <n-button @click="getreturn">返回</n-button>
          <n-button type="primary" @click="handleClose">关闭</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup name="Edit" lang="ts">
import {useRoute, useRouter} from "vue-router";
import {openAndClose} from "../../../hooks/useEdit"
import guiling from "../../../util/guiling";
import {computed, defineExpose} from "vue";

const flexFormref = ref(null)
const router = useRouter()
const route = useRoute()
const formValue = ref({})

const reset = () => {
  formValue.value = guiling(formValue.value)
}
const chushihua = (data: any) => {
  if (data) {
    formValue.value = data
  }
}
const {showModal, editType, resultText, init, handleClose, getsuccess, getfaild,title} = openAndClose(chushihua, reset)


// 表单配置
const formList = ref([
  {
    label: "专栏名称",
    key: "name",
    type: "input",
    rules: [{required: true, message: "请输入专栏名称", trigger: ["input", "change", "blur"]}, {
      max: 50,
      min: 2,
      message: "请输入2-50为的名称",
      trigger: ["input", "change", "blur"]
    },]
  },
])

// 点击确定
const handleSave = () => {
  if (formValue.value.id) {
    flexFormref.value.jiaoyan(updatefunc)
  } else {
    flexFormref.value.jiaoyan(createfunc)
  }
}
const createfunc = (data:any) => {
  console.log(data)
  getsuccess("创建成功")
}

const updatefunc = (data:any) => {
  console.log(data)
  getfaild("修改失败")
}

// 点击返回
const getreturn = () => {
  if (formValue.value.id) {
    editType.value = "edit"
  } else {
    editType.value = "add"
  }
  resultText.value = ""
}
// 抛出属性和方法
defineExpose({init, handleClose})
</script>

<style scoped>

</style>